<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>服务评价 </text></template>
    </GlobalTopBar>
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <view class="page_content">
      <!-- 顶部评分 -->
      <view class="center_1 flex_center">
        <image class="head_img" :src="options.headimg" mode="scaleToFill" />
        <view class="center_1_nickname">{{ options.worker_name }}</view>
        <view class="center_1_ts">请您给师傅的服务进行评价</view>
        <view
          class="pj_1 center_1_item flex_center"
          v-for="(item, index) in pjList"
          :key="index + 1"
        >
          <view>{{ item.text }}</view>
          <view class="xx_box">
            <image
              class="xx_img"
              v-for="(i, y) in item.maxXx"
              :key="y + 1"
              :src="
                y < item.xx_h_count
                  ? `${store.imgDomain}evaluate_1.png`
                  : `${store.imgDomain}evaluate_2.png`
              "
              mode="scaleToFill"
              @click="item.xx_h_count = y + 1"
            />
          </view>
        </view>
      </view>
      <!-- 服务评价 -->
      <view class="center_2">
        <view class="form_item ac">
          <view class="label">服务评价：</view>
          <textarea
            v-model="textareain"
            class="textareain"
            type="text"
            placeholder="请输入服务评价"
          />
        </view>
        <view
          class="form_item"
          style="flex-direction: column; align-items: flex-start; width: 100%"
        >
          <view class="label">上传照片(最多五张)：</view>
          <view class="imgboxs">
            <view class="ulimgbox" v-if="imgList.length">
              <view
                class="lib"
                v-for="(item, index) in imgList"
                :key="index + 1"
              >
                <image :src="item" mode="aspectFill" />
                <view class="close2" @click="imgList.splice(index, 1)">
                  <image
                    class="close2_img"
                    :src="`${store.imgDomain}close2.png`"
                    mode="scaleToFill"
                  />
                </view>
              </view>
            </view>

            <view
              class="scb flex_center"
              @click="chooseImage"
              v-if="imgList.length < 5"
            >
              <uni-icons type="plusempty" size="30" color="#83A5FA"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <!-- 保存 -->
      <view class="btns" @click="doSaveServiceOrderEvaluate">提交</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';

const textareain = ref('');
const store = useCounterStore();
const userInfo = ref();
const imgList = ref([]);
const nickname = ref(store.userInfo?.nick_name || '');
const pjList = ref([
  {
    text: '服务评价',
    xx_h_count: 5,
    maxXx: 5,
  },
  {
    text: '服务态度',
    xx_h_count: 5,
    maxXx: 5,
  },
  {
    text: '服务质量',
    xx_h_count: 5,
    maxXx: 5,
  },
]);

// 上传图
const chooseImage = () => {
  uni.chooseImage({
    count: 5 - imgList.value.length,
    sourceType: ['album', 'camera'], // 可选择相册或相机（拍照）
    success: (res) => {
      res.tempFilePaths.forEach((tempFilePath) => {
        onChooseAvatar(tempFilePath); // 单独的单张上传函数
      });
    },
    fail: (err) => {
      console.log('选择图片失败', err);
    },
  });
};
// 选择头像回调
const onChooseAvatar = (tempFilePaths) => {
  uni.uploadFile({
    url: 'https://adm.jinjiangservice.com/index.php/wxapp/common/uploadCommonImage',
    method: 'POST',
    filePath: tempFilePaths,
    formData: {
      file: tempFilePaths,
    },
    header: {
      'Content-Type': 'multipart/form-data',
    },
    name: 'file',
    success(res) {
      imgList.value.push(JSON.parse(res.data).data.path);
    },
  });
};
// 提交订单评价
const doSaveServiceOrderEvaluate = async () => {
  if (!textareain.value) {
    uni.showToast({
      title: '请输入评价',
      icon: 'none',
    });
    return;
  }
  await request(
    'wxapp/user/doSaveServiceOrderEvaluate',
    {
      service_order_id: options.value.id,
      content: textareain.value,
      img: imgList.value.join(',') || '',
      score: Math.floor(
        pjList.value.reduce((a, b) => (a += b.xx_h_count), 0) / 3,
      ),
    },
    'post',
  );
  uni.showToast({
    title: '评价成功',
    icon: 'none',
  });
  uni.navigateBack({
    delta: 1,
  });
};

const options = ref({});
onShow(() => {
  userInfo.value = store.userInfo;
});
onLoad((option) => {
  options.value = option;
});
</script>

<style lang="scss" scoped>
.topbars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background-color: #fff;
}

.page_content {
  padding: 20rpx;
  box-sizing: border-box;
  .center_1 {
    border-radius: 20rpx;
    border: 1rpx solid #729ef8;
    background-color: #fff;
    box-sizing: border-box;
    padding: 25rpx;
    text-align: center;
    flex-direction: column;
    .head_img {
      margin-bottom: 20rpx;
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
    }
    .center_1_nickname {
      line-height: 50rpx;
      font-size: 30rpx;
      font-weight: 700;
    }
    .center_1_ts {
      color: $uni-text-color-grey;
      line-height: 45rpx;
      margin-bottom: 30rpx;
    }
    .xx_box {
      margin-left: 40rpx;
      .xx_img {
        width: 36rpx;
        height: 34rpx;
        margin: 0 20rpx;
      }
    }
    .pj_1 {
      margin: 10rpx 0;
    }
  }
  .center_2 {
    margin: 20rpx 0;
    border-radius: 20rpx;
    border: 1rpx solid #729ef8;
    background-color: #fff;
    box-sizing: border-box;
    padding: 25rpx;
  }
}
.form_item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  font-size: 30rpx;
  &.ac {
    flex-direction: column;
    align-items: flex-start;
  }
  &.active {
    border: none;
  }
  .inps {
    box-sizing: border-box;
    padding-left: 30rpx;
    flex: 1;
    text-align: right;
  }
  .select {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.scb {
  margin-top: 20rpx;
  border: 1rpx dashed #83a5fa;
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}
.ulimgbox {
  margin: 20rpx 0;
  display: flex;
  flex-wrap: wrap;

  .lib {
    width: 150rpx;
    margin-bottom: 20rpx;
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
    position: relative;
    .close2_img {
      position: absolute;
      top: -15rpx;
      right: -15rpx;
      width: 30rpx;
      height: 30rpx;
    }
    image {
      border-radius: 20rpx;
      width: 150rpx;
      height: 150rpx;
    }
  }
}
.textareain {
  width: 100%;
  border: 1rpx solid #999;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 20rpx;
  margin-top: 20rpx;
}
.btns {
  line-height: 70rpx;
  color: #fff;
  font-size: 30rpx;
  padding: 0 133rpx;
  background-color: #0084f2;
  border-radius: 35rpx;
  margin: 0 auto;
  width: max-content;
}
</style>
